<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <title>Purple Admin</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="../../vendors/iconfonts/mdi/css/materialdesignicons.min.css"/>
    <link rel="stylesheet" href="../../vendors/css/vendor.bundle.base.css"/>
    <!-- endinject -->
    <!-- inject:css -->
    <link rel="stylesheet" href="../../css/style.css"/>
    <!-- endinject -->
    <link rel="shortcut icon" href="../../images/favicon.png"/>
    <style type="text/css">
        #Conframe {
            border: none;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="showTbody">
    <div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <i class="mdi mdi-home menu-icon"></i>首页/权限/角色管理
        </div>
        <div class="card-body">
            <h4 class="card-title"><i class="mdi mdi-format-list-bulleted menu-icon"></i>数据列表</h4>
            <div class="text-right">
                <!-- Button trigger modal -->
                <button id="addRoleBtn" type="button" class="btn btn-primary" data-toggle="modal"
                        data-target="#myModal">
                    添加
                </button>
            </div>
            <br/>
            <!-- 弹出层添加列表 -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                        </div>
                        <h4 class="modal-title text-center" id="myModalLabel">添加角色</h4>
                        <form class="forms-sample" id="editRoeFrom">
                            <input type="hidden" id="editRoleId" name="rId" value="0"/>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="exampleInputName1" class="text-left">角色名称</label>
                                    <input type="text" name="rName" class="form-control" id="exampleInputName1"
                                           placeholder="请输入角色名称"/>
                                </div>
                                <div class="form-group">
                                    <label for="cdId" class="text-left">所属部门</label>
                                    <select id="cdId" name="dId" class="form-control col-md-6">
                                        <option value="0">全部</option>
                                        <option th:each="dept:${deptList}" th:text="${dept.dName}" th:value="${dept.did}"></option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="exampleTextarea1" class="text-left">角色描述</label>
                                    <textarea class="form-control" name="rDescribe" id="exampleTextarea1"
                                              rows="4"></textarea>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" id="editBtn" class="btn btn-primary" data-dismiss="modal">保存
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- /弹出层添加列表 -->

            <!--Role列表-->
            <table class="table table-bordered">
                <thead>
                <tr class="table-danger">
                    <th>
                        角色名称
                    </th>
                    <th>
                        角色描述
                    </th>
                    <th>
                        添加时间
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="role:${allRole}">
                    <td th:text="${role.rName}"></td>
                    <td th:text="${role.rDescribe}"></td>
                    <td th:text="${role.createTimeStr}"></td>
                    <td>
                        <input type="hidden" th:value="${role.rId}"/>
                        <a href="JavaScript:void(0);" name="menuBtn">权限设置</a>&emsp;
                        <a href="JavaScript:void(0);" name="updRoleBtn" data-target="#myModal"
                           data-toggle="modal">编辑</a>&emsp;
                        <a href="JavaScript:void(0);" name="delRoleBtn">删除</a>
                    </td>
                </tr>
                </tbody>
            </table>
            <!--/Role列表-->
            <br/>
            <div class="text-right">
                <p>
                    当前 <span id="cPage" th:text="${pageInfo.pageIndex}"></span> 页,总 <span id="totalPage"
                                                                                          th:text="${pageInfo.totalPageCount}"></span>
                    页,共 <span id="totalCount" th:text="${pageInfo.totalCount}"></span> 条记录
                </p>
                <a href="JavaScript:void(0);" onclick="first(1)">首页</a>&emsp;
                <a href="JavaScript:void(0);" id="per" onclick="per()">上一页</a>&emsp;
                <span th:text="${pageInfo.pageIndex}" style="color: red"></span>&emsp;
                <a href="JavaScript:void(0);" id="next" onclick="next()">下一页</a>&emsp;
                <a href="JavaScript:void(0);" onclick="last()">末页</a>
                <div class="nav-item dropdown">
                    <a class="nav-link count-indicator dropdown-toggle" id="messageDropdown" href="#"
                       data-toggle="dropdown" aria-expanded="true">
                        请选择
                    </a>
                    <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list"
                         aria-labelledby="messageDropdown">
                        <li th:each="int:${pageArr}"><a th:text="${int}" href="JavaScript:void(0)" name="pageTo" class="dropdown-item preview-item"></a></li>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--jquery-->
<script src="../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<!-- plugins:js -->
<script src="../../vendors/js/vendor.bundle.base.js"></script>
<script src="../../vendors/js/vendor.bundle.addons.js"></script>
<!-- endinject -->
<!-- Plugin js for this page-->
<!-- End plugin js for this page-->
<!-- inject:js -->
<script src="../../js/off-canvas.js"></script>
<script src="../../js/misc.js"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<script src="../../js/dashboard.js"></script>
<!-- End custom js for this page-->
<script type="text/javascript">
    $('.dropdown-toggle').dropdown();


    //跳首页
    function first(pageIndex) {
        ajaxPage(pageIndex);
    }

    //上一页
    function per() {
        var pageIndex = $("#cPage").html();
        if (parseInt(pageIndex) === 1) {
            alert("已到首页");
            return;
        }
        ajaxPage(parseInt(pageIndex) - 1);
    }

    //下一页
    function next() {
        var pageIndex = $("#cPage").html();
        var totalPage = $("#totalPage").html();
        if (pageIndex === totalPage) {
            alert("已到尾页");
            return;
        }
        ajaxPage(parseInt(pageIndex) + 1);
    }

    //末页
    function last() {
        var pageIndex = $("#totalPage").html();
        ajaxPage(pageIndex);
    }

    //分页ajax请求方法
    function ajaxPage(pageIndex) {
        $.ajax({
            "url": "/role/getPage?pageNum=" + pageIndex,
            "type": "get",
            "data": "",
            "dataType": "text",
            success: function (data) {
                $("#showTbody").load(data);
            },
            error: function () {
                alert("分页ajax异常")
            }
        });
    }


    $(function () {
        //跳转至角色设置页面(带角色id)
        $("[name = menuBtn]").click(function () {
            var $menuBtn = $(this);
            var rId = $menuBtn.prev().val();
            $.ajax({
                "url": "/menuManage/getMenu?rId="+rId,
                "type": "get",
                "data": "",
                "dataType": "text",
                success: function (data) {
                    // $("#showTbody").load(data);
                    window.location.href = data;
                },
                error: function (e) {
                    alert("跳转权限设置页面ajax异常")
                }
            })
        });


        //选择性跳页
        $("[name = pageTo]").click(function () {
            var $pageTo = $(this);
            var pageIndex = $pageTo.html();
            ajaxPage(pageIndex);
        });

        //删除
        $("[name = delRoleBtn]").click(function () {
            var $delBtn = $(this);
            var rId = $delBtn.prev().prev().prev().val();
            $.ajax({
                "url": "/role/delRoleById?rId=" + rId,
                "type": "post",
                "data": "",
                "dataType": "json",
                success: function (data) {
                    alert(data.msg);
                    $("#showTbody").load("/role/getRole");
                },
                error: function () {
                    alert("删除ajax异常")
                }
            });
        });

        //新增和修改Role的表单提交
        $("#editBtn").click(function () {
            var roleId = $("#editRoleId").val();
            $.ajax({
                "url": "/role/edit?role=" + $("#editRoeFrom").serialize(),
                "type": "post",
                "data": {"roleId": roleId},
                "dataType": "json",
                success: function (data) {
                    alert(data.msg);
                    $("#showTbody").load("/role/getRole");
                },
                error: function () {
                    alert("新增/修改ajax异常")
                }
            })
        });

        //点击新增按钮,将h4标签的html改为(添加角色)
        $("#addRoleBtn").click(function () {
            $("#myModalLabel").html("添加角色");
        });

        //修改Role
        $("[name = updRoleBtn]").click(function () {
            var $updRole = $(this);
            var rId = $updRole.prev().prev().val();
            //发送ajax请求,根据roleId查出角色
            $.ajax({
                "url": "/role/getRoleById?rId=" + rId,
                "type": "get",
                "data": "",
                "dataType": "json",
                success: function (data) {
                    $("#exampleInputName1").val(data.rName);
                    $("#exampleTextarea1").val(data.rDescribe);
                    $("#editRoleId").val(data.rId);
                    //将弹出层主题改为(修改部门)
                    $("#myModalLabel").html("修改角色")
                },
                error: function () {
                    alert("获取Role的ajax异常")
                }
            });
        });


    })
</script>
</body>

</html>
